<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page import="cn.zb.pojo.*" %>
<%@ page import="cn.zb.make.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>详细帖子内容</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	 <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="jsTools/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="jsTools/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="jsTools/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="jsTools/jquery-ui-1.12.1.custom/jquery-ui.js"></script> 
    <link href="jsTools/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet"></link> 
   
    <script src="jsTools/jquery-validation-1.16.0/dist/jquery.validate.min.js"></script>
    <script src="jsTools/jquery-validation-1.16.0/dist/localization/messages_zh.js"></script>
    <script src="jsTools/jquery-validation-1.16.0/dist/additional-methods.js"></script>
	
	<link href="jsTools/umeditor1.2.3/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="jsTools/umeditor1.2.3/third-party/template.min.js"></script>
    <script type="text/javascript" src="jsTools/umeditor1.2.3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="jsTools/umeditor1.2.3/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="jsTools/umeditor1.2.3/umeditor.min.js"></script>
   
    <style type="text/css">
    	#index{
    	width:100%;
    	position:fixed;
    	z-index: 1;
    	}
    </style>
  </head>
  <body>
  		<%!
  	 String iterative(Reply reply,StringBuffer stringBuffer,HttpServletRequest request){	  	         	 	
  			for(Reply r:reply.getReplyList()){		
			    stringBuffer.append("<li class='list-group-item'>");
				stringBuffer.append("<div  onmouseover=$('#reply_link_"+r.getId()+"').removeClass('hidden') onmouseout=$('#reply_link_"+r.getId()+"').addClass('hidden')  ><p>");				
				stringBuffer.append("<img class='img-circle' src='"+r.getUser().getHeadImage()+"' height='20' width='20'>");
				stringBuffer.append(r.getUser().getName()+"\t回复"+r.getReply().getUser().getName()+":");			
				stringBuffer.append(r.getContent());
				stringBuffer.append("<a class='close hidden'"); 
				if(request.getSession().getAttribute("user")!=null)
				stringBuffer.append("onclick=$('#reply_confirm_"+r.getId()+"').removeClass('hidden')");
				else
				stringBuffer.append("onclick=alert('请登录！')");
				stringBuffer.append(" id='reply_link_"+r.getId()+"' title='回复'><b ><span class='glyphicon glyphicon-comment'></span></b></a>");				
				stringBuffer.append("</p><span>"+r.getTime()+"</span></div>");
				stringBuffer.append("<div class=' hidden' id='reply_confirm_"+r.getId()+"' onmouseleave=$(this).addClass('hidden')>" );
				stringBuffer.append("<div class=' well' spellcheck='false' style='height:100;word-break:break-all;border-style:solid;border-color:#454545;overflow-y:auto ' contenteditable='true'>");
				stringBuffer.append("<input contenteditable='false' disabled='disabled' tabindex='-1'value='回复 &nbsp:"+r.getUser().getName()+"' />");
				stringBuffer.append("</div> <div><button  style='background-color: #A8A8A8' onclick=send(this,'"+r.getId()+"')>提交</button></div></div>");								  	  			
				stringBuffer.append("</li>");			
				iterative(r, stringBuffer,request);	
			}		
			 return stringBuffer.toString();
			}%>
  		<div class="container-fluid" id="index"  style="background-color:#CAFFFF">
 			<div  class=" row clearfix " > 	
 				<div class="col-sm-6 column col-sm-offset-6 ">							
 				<ul class="nav nav-tabs" style="float: right;">
				<li id="sign">
				<c:if test="${user.name==null}">				
					<a class="btn.btn-info btn-sm" href="Main/login" data-keyboard="true" data-toggle="modal" data-target=".signOne" title="请登录">登录
					</a>
				</c:if>
				<c:if test="${user.name!=null}">
				<img class="img-circle " src="${user.headImage}" width="50" height="50" >
				<h4><span class="label label-info">昵称：${user.name}</span></h4>
				</c:if>	 
					 
				</li>
				<li>				
					 <a href="Main/register">注册</a>
				</li>
				<li>
					 <a href="Main/forget">忘记密码</a>
				</li>
				<li >
					 <a id="mes" href="#">信息</a>
				</li>
				<li>
					 <a href="outLogin/exit">退出</a>
				</li>
				<li>
					 <a href="workerSign.html">工作人员入口</a>
				</li>
				</ul>	
				
				</div>			
 			</div>
 		</div>	
 		
 		<div class="modal fade signOne"  role="dialog">
			<div class="modal-dialog" >									
						<div class="modal-content">
							
						</div>						   			 
			</div>
		</div>
		
 		<div class="col-sm-12" style="margin-top: 85">
  			<div class="container">
  					<table class="table table-bordered">
  							<caption class="bg-info"><h3 class="text-center">标题:${topic.title}</h3></caption>
  							<tbody>  						
  								<tr class='info'>
  									<div class="col-sm-3">
	  									<td> 
	  											 <ul class="list-group">
										   			 <li class="list-group-item"><img width="50" class="img-circle" height="50" src="${topic.user.headImage}"><h4><span class="label label-primary">昵称:${topic.user.name}</span></h4></li>
										    		 <li class="list-group-item"><h4><span class="label label-primary">发帖时间:${topic.publish}</span></h4></li>
										    		 <li class="list-group-item"><h4><span class="label label-primary">帖子回复数:${fn:length(topic.replyList)}</span></h4></li>
											     </ul>											 									 
										 </td>
									 </div>
									 <div class="col-sm-9">
	  									<td>  										
	  											<div class="media">	<p>${topic.content}</p>		  	  	
									  	  		</div>
									  	  		<ul class="nav nav-pills nav-justified" >
											  	  		<li>
												  	  		<button class="btn btn-primary " onclick='up(${topic.id},true)'  title="赞一下" style="text-shadow: black 5px 3px 3px;"><span class=" glyphicon glyphicon-thumbs-up" ></span></button><span id="good"><%Topic topic=(Topic)request.getAttribute("topic");int good=0;int bad=0;for(Good g:topic.getGoods()){if(g.isStatus())good++;else bad++;}%><%=good %></span>
												  	  	</li>
												  	  	<li>
												  	  		<button class="btn btn-primary " onclick='down(${topic.id},false)'   title="踩一下"   style="text-shadow: black 5px 3px 3px;"><span class=" glyphicon glyphicon-thumbs-down" ></span></button><span id="bad"><%=bad %></span>
												  	  	</li>					  	  	
												  	  	<li>
												  	  		<button class="btn btn-primary "  style="text-shadow: black 5px 3px 3px;" title="评论" onclick=<% User user=(User) request.getSession().getAttribute("user");if(user==null){%>alert('请登录')<%} else{%>$('#reply').removeClass('hidden');window.location.hash='#reply'<%}%>><span class="glyphicon glyphicon-comment" ></span></button>
												  	  	</li>
												  	  	<li>
												  	  		<button class="btn btn-primary " title="转发" id="sharp"> <span class=" glyphicon glyphicon-share-alt" ></span></button>
												  	  		<ul class="hidden" style="list-style: none">
												  	  			<li><script type="text/javascript">document.write(['<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=',encodeURIComponent(location.href),'&title=',encodeURIComponent(document.title),'" target="_blank"  title="分享到QQ空间"><img src="http://qzonestyle.gtimg.cn/ac/qzone_v5/app/app_share/btn_share.png" alt="分享到QQ空间" /><\/a>'].join(''));</script></li>
												  	  		</ul>												  	  	
												  	  	</li>
											  	  </ul>  										
	  									</td>
  									</div>
  								</tr>  	
  								<% 
  							       int index=0;
  									for(Reply reply:topic.getReplyList()){  									
  									     if(reply.getReply()==null){
  									     index++;
  							     %>
  								<tr class="success">
  									<div class="col-sm-3 ">
  										<td>
											<ul class="list-group">
					   							 <li class="list-group-item"><h4><span class="label label-primary"><%=index%>楼</span></h4></li>
					    		 				<li class="list-group-item"><img class="img-circle" width="50" height="50" src="<%=reply.getUser().getHeadImage()%>"><h4><span class="label label-primary">昵称:<%=reply.getUser().getName()%></span></h4></li>
					    						 <li class="list-group-item"><h4><span class="label label-primary">评论时间:<%=reply.getTime() %></span></h4></li>
							   				</ul>
							   			</td>
							 		</div>
							 		<div class="col-sm-9" >
							  	  		<td >	
							  	  				<div class="media"  ">	
								  	  				<div class="well row" >									  	  			   
									  	  				<div class="col-sm-12" onmouseover="$('#reply_link_<%=reply.getId() %>').removeClass('hidden')"  onmouseout="$('#reply_link_<%=reply.getId() %>').addClass('hidden')">
										  	  				<p><%=reply.getContent() %>
										  	  					<a class="close hidden" id='reply_link_<%=reply.getId() %>' title="回复"   onclick="<% if(user==null){ %> alert('请登录')<%} else { %>$('#reply_confirm_<%=reply.getId() %>').removeClass('hidden');<% }; %>"><b ><span class="glyphicon glyphicon-comment"></span></b>
											  	  				</a>										  	  														  	  					  	  			
										  	  				</p>
									  	  				</div>
									  	  				<div class="col-sm-10 col-sm-offset-1">
										  	  				<ul class="list-group">
										  	  						<%=iterative(reply,new StringBuffer(),request)%>	
										  	  				</ul>
									  	  				</div>
								  	  				</div>	
								  	  				<div class="col-sm-12 hidden" id="reply_confirm_<%=reply.getId() %>" onmouseleave="$(this).addClass('hidden')">
									  	  				<div class="col-sm-12 well" spellcheck="false" style="height:100;word-break:break-all;border-style:solid;border-color:#454545;overflow-y:auto "   contenteditable="true" id="${reply.id}" class="hidden">
									  	  					<input contenteditable="false"  tabindex="-1" disabled="disabled" value="回复 &nbsp:<%=reply.getUser().getName()%>" type="text"/>
									  	  				</div>
									  	  				<div><button  style="background-color: #A8A8A8" onclick="send(this,<%=reply.getId()%>)">提交</button></div>
								  	  			 	</div>			  	  							  	  					
							  	  				</div>							  	  				
								  	  	</td>		  	  			  
								  	 </div>		
  								</tr>
  								<%  } 
  								 } %>  															
  							</tbody>  							  					
  					</table>
  					<div class="hidden " id="reply" style="background-color: #666666">
  						<div class="row clearfix "  style="margin: 50px 20%;" >
  							<form>		  	 
								  <div class="panel panel-default" >	
								  		<div class="panel-heading">							  			
													<button type="button" class=" close " onclick="$('#reply').addClass('hidden');">
													&times;
													</button>	
													<br>
										</div>										
										<div class="panel-body" >			
													<script type="text/plain" name="content" id="topic_reply" style="height:300;width:650">   					 
							   						 </script>																									
										</div>	
										<div class="panel-footer">
											<button type="submit" class="center-block btn-primary">提交</button>	
										</div>																				
								  </div>
							</from>
						</div> 					
  					</div>			
  				</div>
  			</div>			   	
  		
	 </body>
	<script>	
	 	 var send=function(obj,id){	 	 		
	 	 		var content=$(obj).parent().prev().text();	
	 	 		if(content=='')	 	 		
	 	 		{alert("请输入!");
	 	 		return;
	 	 		} 	 		
	 	 		$.post("Forum/replyChildren",{content:content,rId:id},function(data){
	 	 			if(data.status==100){
	 	 			    alert(data.message);
	 	 				window.location.reload();	
	 	 			}
	 	 			else
	 	 			 alert(data.message);
	 	 		});
	 	 		
	 	 }
	 	 
	 	 
	 	 
	 	 
 			 var up=function(tId,status){
		 	$.post("Forum/like",{tId:tId,status:status},function(data){
		 		if(data.status==200)
		 			alert(data.message);
		 		 else {
		 		 var star=$("#good").text();		 		
		 		 $("#good").text(1+parseInt(star));}
		 		  		 			
		 	});	
		 };
		 var down=function(tId,status){
		 	$.post("Forum/like",{tId:tId,status:status},function(data){
		 		if(data.status==200)
		 			alert(data.message);
		 		 else {
		 		  var star=$("#bad").text();
		 		 $("#bad").text( 1+parseInt(star));
		 		 }
		 		  		 			
		 	});	
		 };		  
		 var um = UM.getEditor('topic_reply');		
		 $(document).ready(	
		function(){
			$(" #reply form").validate({
			  submitHandler:function(form){
			  var data=$('form').serialize();			 	 
			   $.post("Forum/reply",data+"&tId="+${topic.id},function(msg){
				   	if(msg.status==200)
				   		{	
				   			alert(msg.message);
				   		}
				   		else{		   					   					   		
							window.location.reload();			   			 			   		
				   		}			   		
				   		 }		   		
				   );  
			 },
			  rules:{
				content:{required:true,							
				},			
			},			
				highlight: function ( element, errorClass, validClass ) {
					$( element ).addClass( "has-error" ).removeClass( "has-success" );			
				},
				unhighlight: function ( element, errorClass, validClass ) {
					$( element ).addClass( "has-success" ).removeClass( "has-error" );					
				}			
			}
				);
		}
		);		 
	var mask = '<div id="hicap_mask" style="width:100%;height:100rem;top:0px;left:0px;position:fixed;background:#FFF;opacity:0.9;z-index:998;"></div>';
     var loading = '<div id="loading"><img src="images/loading.gif" style="width:10rem;position:absolute;left:50%;top:50%;z-index:999;margin-left:-5rem;margin-top:-5rem;" /></div>';
				   
 	$(document).ajaxStart(function(){
		$(mask).appendTo('body');
		$(loading).appendTo('body');
	}).ajaxStop(function() {
		$("#hicap_mask").remove();
		$("#loading").remove();
		});
		$("#sharp").mouseenter(function(){removeClass("hidden");});
	</script>
			 
</html>

										  	  													  	  					